<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="修改资料" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="background-color: #F2F3F5;">
			<view class="bg_white">
				<view class="u-flex u-row-between list_con">
					<text class="title">修改头像</text>
					<view class="u-rela">
						<u-avatar class="u-abso" style="top:0;left:0;" :src="user.avatar" defaultUrl="https://resourse.cnlhjt.com/upload/20220825/9fcd7669f37b921409d34469b189f623.png" mode="aspectFill" @click="toselect"></u-avatar>
						
					</view>
					
				</view>
				<view class="u-flex u-row-between list_con" style="border-top:1rpx solid #f8f8f8;border-bottom:1rpx solid #f8f8f8;">
					<text class="title">用户名</text>
					<input type="text" v-model="user.username" placeholder="请输入">
				</view>
				<view class="u-flex u-row-between list_con">
					<text class="title">性别</text>
					<view>
						<u-radio-group v-model="radiovalue1" placement="row">
						    <u-radio activeColor="#008987" :customStyle="{marginLeft: '20px'}"
						      v-for="(item, index) in radiolist1"
						      :key="index"
						      :label="item.name"
						      :name="item.name"
						      @change="radioChange"
						    >
						    </u-radio>
						  </u-radio-group>
					</view>
				</view>
			</view>
			<u-button :customStyle="btnStyle" @click="editIntro">确认提交</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { getInfo } from "@/service/userService.js";
	import { editInfo } from "@/service/userService.js";
	export default {
		data () {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginLeft: '2%',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF',
				
					position: 'fixed',
					bottom: '40rpx'
				},
				fileList1:[],
				user:{
					username:'',
					avatar:'',
					sex:1,
				},
				username:'',
				image:'',
				sex:1,
				radiolist1: [{
					name: '男',
					disabled: false
				  },
					{
					  name: '女',
					  disabled: false
					}
				  ],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '男',
			}
		},
		onLoad() {
			getInfo().then(this.getInfo);
		},
		methods:{
			getInfo(e){
				if(e.code ==200){
					this.user = e.result;
					this.fileList1.push({url:e.result.avatar});
					this.image=e.result.avatar;
					this.sex=e.result.sex;
					if(e.result.sex==1){
						this.radiovalue1='男'
					}else{
						this.radiovalue1='女'
					}
				}
			},
			radioChange(n) {
				if(n=='男'){
					this.sex=1
				}else{
					this.sex=2
				}
			},
			toselect(){
				uni.chooseImage({
					count: 1, // 头像上传1张
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], // 从相册选择
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
					
							url: 'https://admin.gslhzhwy.com/api/upload/file', // 仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								user: 'test'
							},
							success: (res) => {
								let par = JSON.parse(res.data);
								if (par.code == 1) {
									this.user.avatar=par.data.url;
								}
							}
					
						});
				
					}
				
				})
			},
			editIntro(){
				var that=this;
				editInfo({
					username:this.user.username,
					avatar:this.user.avatar,
					sex:this.sex
				}).then(res => {
					if (res.code == 200) {
						this.$refs.uToast.show({
					
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								uni.$u.vuex('username', that.user.username);
								uni.$u.vuex('avatar', that.user.avatar);
								uni.$u.vuex('sex', that.sex);
								uni.navigateBack({
									delta: 1
								})
								
							}
						})
					} else {
						this.$refs.uToast.show({
					
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F2F3F5;
	}
	.u-upload[data-v-69e2a36e]{
		width:80rpx !important;
		height:80rpx !important;
		// margin:0 auto;
	}
	.bg_white{
		padding:20rpx 0;
		background-color: #fff;
		margin-top:20rpx;
		border-radius: 20rpx;
	}
	.ava_con{
		width:80rpx;
		height:80rpx;
		border-radius: 50%;
		overflow: hidden;
	}
	.list_con{
		height:90rpx;
		line-height: 90rpx;
		padding:0 20rpx;
	}
	.title{
		font-size: 28rpx;
		color:#333;
	}
	
	.bg_white input{
		font-size: 28rpx;
		padding:10rpx 0;
		text-align: right;
		color:#666;
		// border-bottom: 1rpx solid #ccc;
	}
	
</style>
